<template>
    <div class="edit">
        <h3>重磅推荐</h3>
        <ul>
            <li v-for="item in arr" :key="item.id">
              <router-link :to="{path:'/detail',query:{id:item.id,title:item.title}}">
                    <div>
                        <img :src="item.cover" :alt="item.cover">
                    </div>
                    <div class="intro">
                        <p class="title">{{ item.title }}</p>
                        <p class="author">{{item.author}}</p>
                        <p class="content">{{ item.content }}</p>

                        <span class="extra">{{ item.category }}</span>
                        <span class="extra">{{ item.extra }}</span>
                    </div>
                </router-link>

            </li>
        </ul>
    </div>
</template>

<style lang="less" >
@import '../common/less/varible.less';

.edit {

    width: 100%;
    margin-top: 70px;

    h3{
        padding: 0 20px;
    }

    ul {
        flex-wrap: wrap;
        padding: 0 20px;

        li {
            margin-top: 20px;

            a {
                box-sizing: border-box;
                display:flex;
                img {
                    display: inline-block;
                    width: 100px;
                    height: 140px;
                }
            }

            .intro {
                margin-left: 10px;

                P {
                    width: 100px;
                    margin-top: 5px;
                }

                .title {
                    width:100%;
                    font-size: 18px;
                    font-weight: bold;
                }

                .author {
                    margin-top:5px;
                    font-size: 15px;
                    color: gray;
                }


                .content {
                    margin-top: 10px;
                    font-size:18px;
                    width: 100%;
                    height: 56px;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                }
                span{
                    margin-left: 10px;
                }
                .extra {
                    display:inline-block;
                    margin-top: 9px;
                    font-size:18px;
                    color: pink;
                }
            }
        }
    }

}
</style>

<script>
// 导入api
import { Personalized } from '../api/index'


export default {
  data() {
    return {
      arr: [],
    }
  },
  methods: {
    async getEditRecommand() {
      await Personalized({ limit: 3 })
        .then(
          content => {
            console.log("--->:", content);
            let { list } = content;
            let newArr = list.map((item, index) => {
              let obj = {};
              obj.id = item.id;
              obj.author = item.author;
              obj.title = item.title;
              obj.content = item.content;
              obj.cover = item.cover;
              obj.extra = item.extra;
              obj.category = item.category;
              obj.index = index;
              return obj;
            })
            this.arr = newArr;
            // console.log(newArr)
          }
        )
        .catch(
          err => {
            console.log("请求失败", err)
          }
        )
    }
  },

  created() {
    this.getEditRecommand();
  }

}
</script>